import React, { useState } from 'react';
import * as echarts from 'echarts';
import EChart from '../components/EChart';

// 定义数据类型
interface TableData {
  id: number;
  name: string;
  isFavorite: boolean;
  likes: number;
  forwards: number;
  link: string;
  crawlTime: string;
  plays: number;
  imageId: number;
  selected: boolean;
  platform: string; // 添加平台字段
}

const AlarmPage: React.FC = () => {

  // 生成更多模拟数据用于测试分页和时间搜索
  const generateMockData = () => {
    const platforms = ['douyin', 'kuaishou', 'xiaohongshu', 'wechat'];
    const names = ['产品展示视频', '营销推广内容', '用户教育视频', '品牌宣传视频'];
    const data = [];
    
    // 生成30条数据，覆盖不同日期
    for (let i = 1; i <= 30; i++) {
      const date = new Date();
      date.setDate(date.getDate() - (30 - i)); // 生成最近30天的数据
      const dateStr = date.toISOString().split('T')[0];
      
      data.push({
        id: i,
        name: `${names[i % names.length]}${i}`,
        isFavorite: false,
        likes: Math.floor(Math.random() * 10000) + 1000,
        forwards: Math.floor(Math.random() * 5000) + 500,
        link: '#',
        crawlTime: dateStr,
        plays: Math.floor(Math.random() * 100000) + 5000,
        imageId: i * 20,
        selected: false,
        platform: platforms[i % platforms.length]
      });
    }
    
    return data;
  };

  // 模拟数据 - 保存为原始数据用于重置
  const originalTableData = generateMockData();

  // 状态管理
  const [tableData, setTableData] = useState<TableData[]>([...originalTableData]);
  const [filteredData, setFilteredData] = useState<TableData[]>([...originalTableData]);
  const [searchName, setSearchName] = useState('');
  const [searchPlatform, setSearchPlatform] = useState('all');
  const [searchStartDate, setSearchStartDate] = useState('');
  const [searchEndDate, setSearchEndDate] = useState('');
  const [showAddModal, setShowAddModal] = useState(false);
  // 分页状态
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(5);
  // 全选状态
  const [allSelected, setAllSelected] = useState(false);

  // 处理全选/取消全选
  const handleSelectAll = () => {
    const newAllSelected = !allSelected;
    setAllSelected(newAllSelected);
    // 更新当前页所有数据的选中状态
    const currentData = getCurrentPageData();
    const updatedTableData = tableData.map(item => {
      // 检查该项是否在当前页
      const isInCurrentPage = currentData.some(currentItem => currentItem.id === item.id);
      return isInCurrentPage ? { ...item, selected: newAllSelected } : item;
    });
    setTableData(updatedTableData);
  };

  // 处理单个行选择
  const handleSelectItem = (id: number) => {
    const updatedTableData = tableData.map(item => 
      item.id === id ? { ...item, selected: !item.selected } : item
    );
    setTableData(updatedTableData);
    
    // 更新全选状态
    const currentData = getCurrentPageData();
    const selectedInCurrentPage = updatedTableData.filter(item => {
      return currentData.some(currentItem => currentItem.id === item.id) && item.selected;
    });
    setAllSelected(selectedInCurrentPage.length === currentData.length);
  };
  
  // 新数据表单状态
  const [newData, setNewData] = useState({
    name: '',
    likes: 0,
    forwards: 0,
    plays: 0,
    crawlTime: '',
    platform: 'douyin' // 默认平台
  });

  // 编辑功能状态
  const [showEditModal, setShowEditModal] = useState(false);
  const [editingData, setEditingData] = useState<TableData | null>(null);
  const [editFormData, setEditFormData] = useState({
    name: '',
    likes: 0,
    forwards: 0,
    plays: 0,
    crawlTime: '',
    platform: 'douyin'
  });

  // 处理搜索
  const handleSearch = () => {
    let filtered = [...tableData];
    
    // 按名称搜索
    if (searchName) {
      filtered = filtered.filter(item => item.name.toLowerCase().includes(searchName.toLowerCase()));
    }
    
    // 按平台搜索
    if (searchPlatform !== 'all') {
      filtered = filtered.filter(item => item.platform === searchPlatform);
    }
    
    // 按时间范围搜索 - 增强版
    if (searchStartDate || searchEndDate) {
      filtered = filtered.filter(item => {
        const itemDate = new Date(item.crawlTime);
        let startDateValid = true;
        let endDateValid = true;
        
        if (searchStartDate) {
          startDateValid = itemDate >= new Date(searchStartDate);
        }
        
        if (searchEndDate) {
          // 设置结束日期为当天的最后一刻
          const endDate = new Date(searchEndDate);
          endDate.setHours(23, 59, 59, 999);
          endDateValid = itemDate <= endDate;
        }
        
        return startDateValid && endDateValid;
      });
    }
    
    setFilteredData(filtered);
    // 重置全选状态
  };
  
  // 定义静态的图表数据
  const trendData = {
    users: ['用户A', '用户B', '用户C', '用户D', '用户E'],
    followers: [400000, 350000, 900000, 200000, 450000],
    likes: [150000, 180000, 250000, 100000, 200000]
  };

  // 折线图配置
  const lineChartOption: echarts.EChartsOption = {
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['粉丝数', '获赞数'],
      textStyle: { color: '#ffffff' }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: trendData.users,
      axisLine: { lineStyle: { color: '#ffd6e0' } }
    },
    yAxis: {
      type: 'value',
      axisLine: { lineStyle: { color: '#ffd6e0' } },
      splitLine: { lineStyle: { color: 'rgba(255, 214, 224, 0.1)' } }
    },
    series: [
      {
        name: '粉丝数',
        type: 'line',
        data: trendData.followers,
        smooth: true,
        lineStyle: { width: 3, color: '#ff69b4' },
        itemStyle: { color: '#ff69b4' }
      },
      {
        name: '获赞数',
        type: 'line',
        data: trendData.likes,
        smooth: true,
        lineStyle: { width: 3, color: '#ffb6c1' },
        itemStyle: { color: '#ffb6c1' }
      }
    ]
  };

  // 饼图配置
  const pieChartOption: echarts.EChartsOption = {
    tooltip: {
      trigger: 'item',
      formatter: '{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: { 
        color: '#333333',
        fontSize: 12,
        fontWeight: 'bold'
      },
      itemWidth: 14,
      itemHeight: 14
    },
    series: [
      {
        name: '数据分布统计',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: true,
        label: {
          show: true,
          position: 'outside',
          formatter: '{b}: {d}%',
          fontSize: 11,
          color: '#333333'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold',
            color: '#333333'
          }
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 5,
          lineStyle: {
            color: '#ffb6c1'
          }
        },
        data: [
          { value: 300000, name: '粉丝量', itemStyle: { color: '#ff69b4' } },
          { value: 200000, name: '获赞量', itemStyle: { color: '#ff1493' } },
          { value: 150000, name: '转发量', itemStyle: { color: '#ffb6c1' } },
          { value: 100000, name: '点击量', itemStyle: { color: '#ffd1dc' } }
        ]
      }
    ]
  };

  // 处理重置
  const handleReset = () => {
    setSearchName('');
    setSearchPlatform('all');
    setSearchStartDate('');
    setSearchEndDate('');
    setFilteredData([...tableData]);
    // 重置分页
    setCurrentPage(1);
  };

  // 计算分页数据
  const getCurrentPageData = () => {
    const startIndex = (currentPage - 1) * pageSize;
    const endIndex = startIndex + pageSize;
    return filteredData.slice(startIndex, endIndex);
  };
  


  // 计算总页数
  const totalPages = Math.ceil(filteredData.length / pageSize);

  // 处理页码变化
  const handlePageChange = (newPage: number) => {
    if (newPage >= 1 && newPage <= totalPages) {
      setCurrentPage(newPage);
    }
  };

  // 处理每页条数变化
  const handlePageSizeChange = (newSize: number) => {
    setPageSize(newSize);
    setCurrentPage(1);
  };

  // 监听搜索条件变化，自动执行搜索
  React.useEffect(() => {
    handleSearch();
    // 搜索时重置到第一页
    setCurrentPage(1);
  }, [searchName, searchPlatform, searchStartDate, searchEndDate, tableData]);

  // 处理新增数据
  const handleAddData = () => {
    // 生成新ID
    const newId = tableData.length > 0 ? Math.max(...tableData.map(item => item.id)) + 1 : 1;
    
    // 创建新数据项
    const dataToAdd: TableData = {
      id: newId,
      name: newData.name,
      isFavorite: false,
      likes: Number(newData.likes),
      forwards: Number(newData.forwards),
      plays: Number(newData.plays),
      crawlTime: newData.crawlTime || new Date().toISOString().split('T')[0],
      link: '#',
      imageId: newId * 20,
      selected: false,
      platform: newData.platform
    };
    
    // 添加到表格数据
    const updatedTableData = [...tableData, dataToAdd];
    setTableData(updatedTableData);
    
    // 重置表单并关闭模态框
    setNewData({
      name: '',
      likes: 0,
      forwards: 0,
      plays: 0,
      crawlTime: '',
      platform: 'douyin'
    });
    setShowAddModal(false);
  };

  // 处理编辑数据
  const handleEdit = (item: TableData) => {
    setEditingData(item);
    setEditFormData({
      name: item.name,
      likes: item.likes,
      forwards: item.forwards,
      plays: item.plays,
      crawlTime: item.crawlTime,
      platform: item.platform
    });
    setShowEditModal(true);
  };

  // 保存编辑数据
  const handleSaveEdit = () => {
    if (!editingData) return;
    
    // 更新表格数据
    const updatedTableData = tableData.map(item => 
      item.id === editingData.id
        ? {
            ...item,
            name: editFormData.name,
            likes: Number(editFormData.likes),
            forwards: Number(editFormData.forwards),
            plays: Number(editFormData.plays),
            crawlTime: editFormData.crawlTime,
            platform: editFormData.platform
          }
        : item
    );
    
    setTableData(updatedTableData);
    
    // 关闭模态框并重置状态
    setShowEditModal(false);
    setEditingData(null);
    setEditFormData({
      name: '',
      likes: 0,
      forwards: 0,
      plays: 0,
      crawlTime: '',
      platform: 'douyin'
    });
  };

  // 取消编辑
  const handleCancelEdit = () => {
    setShowEditModal(false);
    setEditingData(null);
    setEditFormData({
      name: '',
      likes: 0,
      forwards: 0,
      plays: 0,
      crawlTime: '',
      platform: 'douyin'
    });
  };

  // 处理删除单个数据
  const handleDelete = (id: number) => {
    if (window.confirm('确定要删除这条数据吗？')) {
      const updatedTableData = tableData.filter(item => item.id !== id);
      setTableData(updatedTableData);
    }
  };

  // 处理批量删除
  const handleBatchDelete = () => {
    const selectedItems = tableData.filter(item => item.selected);
    if (selectedItems.length === 0) {
      alert('请先选择要删除的数据');
      return;
    }
    
    if (window.confirm(`确定要删除选中的 ${selectedItems.length} 条数据吗？`)) {
      const updatedTableData = tableData.filter(item => !item.selected);
      setTableData(updatedTableData);
    }
  };
  


  return (
    <div style={{
      minHeight: '100vh',
      background: 'linear-gradient(135deg, #fff0f5 0%, #ffd1dc 50%, #ffb6c1 100%)',
      padding: '20px',
      color: '#333333',
      fontFamily: 'Arial, sans-serif'
    }}>
      <h1 style={{
        textAlign: 'center',
        marginBottom: '30px',
        color: '#333333',
        textShadow: '2px 2px 4px rgba(0, 0, 0, 0.1)'
      }}>
        数据统计仪表盘
      </h1>

      {/* 数据表格区域 - 现在在上方 */}
      <div style={{
        background: 'rgba(255, 255, 255, 0.9)',
        borderRadius: '12px',
        padding: '20px',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
        marginBottom: '30px'
      }}>
        <div style={{ display: 'flex', marginBottom: '20px', gap: '10px', alignItems: 'center', flexWrap: 'wrap' }}>
          <button
            onClick={() => setShowAddModal(true)}
            style={{
              padding: '8px 16px',
              backgroundColor: '#ff69b4',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer',
              marginRight: '10px'
            }}
          >
            新增
          </button>


          <input
            type="text"
            placeholder="输入名称搜索"
            value={searchName}
            onChange={(e) => setSearchName(e.target.value)}
            style={{
              padding: '8px 12px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              flex: 1
            }}
          />
          <select
            value={searchPlatform}
            onChange={(e) => setSearchPlatform(e.target.value)}
            style={{
              padding: '8px 12px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              marginRight: '10px'
            }}
          >
            <option value="all">全部平台</option>
            <option value="douyin">抖音</option>
            <option value="kuaishou">快手</option>
            <option value="xiaohongshu">小红书</option>
            <option value="wechat">微信</option>
          </select>
          <div style={{ display: 'flex', alignItems: 'center', marginRight: '10px' }}>
            <span style={{ marginRight: '5px' }}>开始日期:</span>
            <input
            type="date"
            value={searchStartDate}
            onChange={(e) => setSearchStartDate(e.target.value)}
            max={searchEndDate || undefined}
            style={{
              padding: '8px 12px',
              border: '1px solid #ddd',
              borderRadius: '4px'
            }}
            placeholder="开始日期"
          />
          </div>
          <div style={{ display: 'flex', alignItems: 'center' }}>
            <span style={{ marginRight: '5px' }}>结束日期:</span>
            <input
            type="date"
            value={searchEndDate}
            onChange={(e) => setSearchEndDate(e.target.value)}
            min={searchStartDate || undefined}
            style={{
              padding: '8px 12px',
              border: '1px solid #ddd',
              borderRadius: '4px'
            }}
            placeholder="结束日期"
          />
          </div>
          <button
            onClick={handleSearch}
            style={{
              padding: '8px 16px',
              backgroundColor: '#4caf50',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer',
              marginRight: '10px'
            }}
          >
            搜索
          </button>
          <button
            onClick={handleReset}
            style={{
              padding: '8px 16px',
              backgroundColor: '#ff9800',
              color: 'white',
              border: 'none',
              borderRadius: '4px',
              cursor: 'pointer'
            }}
          >
            重置
          </button>
        </div>

        <div style={{ overflowX: 'auto' }}>
          <table style={{
            width: '100%',
            borderCollapse: 'collapse',
            backgroundColor: 'white'
          }}>
            <thead>
              <tr style={{
                backgroundColor: '#ffb6c1',
                color: '#333333'
              }}>
                <th style={{
                  padding: '12px',
                  textAlign: 'left',
                  borderBottom: '1px solid #ddd'
                }}>
                  <input
                    type="checkbox"
                    checked={allSelected}
                    onChange={handleSelectAll}
                    style={{ margin: '0' }}
                  />
                  全选
                </th>
                <th style={{
                  padding: '12px',
                  textAlign: 'left',
                  borderBottom: '1px solid #ddd'
                }}>
                  序号
                </th>
                <th style={{
                  padding: '12px',
                  textAlign: 'left',
                  borderBottom: '1px solid #ddd'
                }}>
                  名称
                </th>
                <th style={{
                  padding: '12px',
                  textAlign: 'left',
                  borderBottom: '1px solid #ddd'
                }}>
                  平台
                </th>
                <th style={{
                  padding: '12px',
                  textAlign: 'left',
                  borderBottom: '1px solid #ddd'
                }}>
                  收藏
                </th>
                <th style={{
                  padding: '12px',
                  textAlign: 'left',
                  borderBottom: '1px solid #ddd'
                }}>
                  点赞量
                </th>
                <th style={{
                  padding: '12px',
                  textAlign: 'left',
                  borderBottom: '1px solid #ddd'
                }}>
                  转发量
                </th>
                <th style={{
                  padding: '12px',
                  textAlign: 'left',
                  borderBottom: '1px solid #ddd'
                }}>
                  播放量
                </th>
                <th style={{
                  padding: '12px',
                  textAlign: 'left',
                  borderBottom: '1px solid #ddd'
                }}>
                  抓取时间
                </th>
                <th style={{
                  padding: '12px',
                  textAlign: 'left',
                  borderBottom: '1px solid #ddd'
                }}>
                  操作
                </th>
              </tr>
            </thead>
            <tbody>
              {getCurrentPageData().map((item) => (
                <tr key={item.id} style={{
                  backgroundColor: item.selected ? '#ffe6ee' : 'white'
                }}>
                  <td style={{
                    padding: '12px',
                    borderBottom: '1px solid #ddd'
                  }}>
                    <input
                      type="checkbox"
                      checked={item.selected}
                      onChange={() => handleSelectItem(item.id)}
                      style={{ margin: '0' }}
                    />
                  </td>
                  <td style={{
                    padding: '12px',
                    borderBottom: '1px solid #ddd'
                  }}>
                    {item.id}
                  </td>
                  <td style={{
                    padding: '12px',
                    borderBottom: '1px solid #ddd'
                  }}>
                    {item.name}
                  </td>
                  <td style={{
                    padding: '12px',
                    borderBottom: '1px solid #ddd'
                  }}>
                    {{
                      'douyin': '抖音',
                      'kuaishou': '快手',
                      'xiaohongshu': '小红书',
                      'wechat': '微信'
                    }[item.platform] || item.platform}
                  </td>
                  <td style={{
                    padding: '12px',
                    borderBottom: '1px solid #ddd'
                  }}>
                    <button
                      onClick={() => {
                        setTableData(tableData.map(data => 
                          data.id === item.id 
                            ? { ...data, isFavorite: !data.isFavorite }
                            : data
                        ));
                      }}
                      style={{
                        background: 'none',
                        border: 'none',
                        cursor: 'pointer',
                        color: item.isFavorite ? '#ff1493' : '#ccc'
                      }}
                    >
                      {item.isFavorite ? '★' : '☆'}
                    </button>
                  </td>
                  <td style={{
                    padding: '12px',
                    borderBottom: '1px solid #ddd'
                  }}>
                    {item.likes}
                  </td>
                  <td style={{
                    padding: '12px',
                    borderBottom: '1px solid #ddd'
                  }}>
                    {item.forwards}
                  </td>
                  <td style={{
                    padding: '12px',
                    borderBottom: '1px solid #ddd'
                  }}>
                    {item.plays}
                  </td>
                  <td style={{
                    padding: '12px',
                    borderBottom: '1px solid #ddd'
                  }}>
                    {item.crawlTime}
                  </td>
                  <td style={{
                    padding: '12px',
                    borderBottom: '1px solid #ddd'
                  }}>
                    <button
                      onClick={() => handleEdit(item)}
                      style={{
                        padding: '5px 10px',
                        marginRight: '5px',
                        backgroundColor: '#ff8fd8',
                        color: 'white',
                        border: 'none',
                        borderRadius: '4px',
                        cursor: 'pointer'
                      }}
                    >
                      编辑
                    </button>
                    <button
                      onClick={() => handleDelete(item.id)}
                      style={{
                        padding: '5px 10px',
                        backgroundColor: '#ff4d4f',
                        color: 'white',
                        border: 'none',
                        borderRadius: '4px',
                        cursor: 'pointer'
                      }}
                    >
                      删除
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div style={{
            marginTop: '20px',
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center'
          }}>
            <button
              onClick={handleBatchDelete}
              style={{
                padding: '8px 16px',
                backgroundColor: '#ff4d4f',
                color: 'white',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer'
              }}
            >
              批量删除
            </button>
            <div style={{
              display: 'flex',
              alignItems: 'center',
              gap: '10px'
            }}>
              <span style={{ marginRight: '10px' }}>每页显示：</span>
              <select
                value={pageSize}
                onChange={(e) => handlePageSizeChange(Number(e.target.value))}
                style={{
                  padding: '6px 10px',
                  border: '1px solid #ddd',
                  borderRadius: '4px'
                }}
              >
                <option value="5">5条</option>
                <option value="10">10条</option>
                <option value="20">20条</option>
                <option value="50">50条</option>
              </select>
              <button
                onClick={() => handlePageChange(currentPage - 1)}
                disabled={currentPage === 1}
                style={{
                  padding: '8px 16px',
                  backgroundColor: currentPage === 1 ? '#ccc' : '#ff69b4',
                  color: 'white',
                  border: 'none',
                  borderRadius: '4px',
                  cursor: currentPage === 1 ? 'not-allowed' : 'pointer'
                }}
              >
                上一页
              </button>
              <span>第 {currentPage} 页 / 共 {totalPages} 页</span>
              <button
                onClick={() => handlePageChange(currentPage + 1)}
                disabled={currentPage === totalPages || totalPages === 0}
                style={{
                  padding: '8px 16px',
                  backgroundColor: (currentPage === totalPages || totalPages === 0) ? '#ccc' : '#ff69b4',
                  color: 'white',
                  border: 'none',
                  borderRadius: '4px',
                  cursor: (currentPage === totalPages || totalPages === 0) ? 'not-allowed' : 'pointer'
                }}
              >
                下一页
              </button>
            </div>
          </div>
      </div>

      {/* 编辑数据模态框 */}
      {showEditModal && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          zIndex: 1000
        }}>
          <div style={{
            backgroundColor: 'white',
            borderRadius: '8px',
            padding: '20px',
            width: '400px',
            maxWidth: '90%'
          }}>
            <h3 style={{ marginBottom: '20px', color: '#333333' }}>编辑数据</h3>
            
            <div style={{ marginBottom: '15px' }}>
              <label style={{ display: 'block', marginBottom: '5px', color: '#333333' }}>名称</label>
              <input
                type="text"
                value={editFormData.name}
                onChange={(e) => setEditFormData({ ...editFormData, name: e.target.value })}
                style={{
                  width: '100%',
                  padding: '8px',
                  border: '1px solid #ddd',
                  borderRadius: '4px'
                }}
                placeholder="请输入名称"
              />
            </div>
            <div style={{ marginBottom: '15px' }}>
              <label style={{ display: 'block', marginBottom: '5px', color: '#333333' }}>平台</label>
              <select
                value={editFormData.platform}
                onChange={(e) => setEditFormData({ ...editFormData, platform: e.target.value })}
                style={{
                  width: '100%',
                  padding: '8px',
                  border: '1px solid #ddd',
                  borderRadius: '4px'
                }}
              >
                <option value="douyin">抖音</option>
                <option value="kuaishou">快手</option>
                <option value="xiaohongshu">小红书</option>
                <option value="wechat">微信</option>
              </select>
            </div>
            
            <div style={{ marginBottom: '15px' }}>
              <label style={{ display: 'block', marginBottom: '5px', color: '#333333' }}>点赞量</label>
              <input
                type="number"
                value={editFormData.likes}
                onChange={(e) => setEditFormData({ ...editFormData, likes: Number(e.target.value) })}
                style={{
                  width: '100%',
                  padding: '8px',
                  border: '1px solid #ddd',
                  borderRadius: '4px'
                }}
                min="0"
              />
            </div>
            
            <div style={{ marginBottom: '15px' }}>
              <label style={{ display: 'block', marginBottom: '5px', color: '#333333' }}>转发量</label>
              <input
                type="number"
                value={editFormData.forwards}
                onChange={(e) => setEditFormData({ ...editFormData, forwards: Number(e.target.value) })}
                style={{
                  width: '100%',
                  padding: '8px',
                  border: '1px solid #ddd',
                  borderRadius: '4px'
                }}
                min="0"
              />
            </div>
            
            <div style={{ marginBottom: '15px' }}>
              <label style={{ display: 'block', marginBottom: '5px', color: '#333333' }}>播放量</label>
              <input
                type="number"
                value={editFormData.plays}
                onChange={(e) => setEditFormData({ ...editFormData, plays: Number(e.target.value) })}
                style={{
                  width: '100%',
                  padding: '8px',
                  border: '1px solid #ddd',
                  borderRadius: '4px'
                }}
                min="0"
              />
            </div>
            
            <div style={{ marginBottom: '20px' }}>
              <label style={{ display: 'block', marginBottom: '5px', color: '#333333' }}>抓取时间</label>
              <input
                type="date"
                value={editFormData.crawlTime}
                onChange={(e) => setEditFormData({ ...editFormData, crawlTime: e.target.value })}
                style={{
                  width: '100%',
                  padding: '8px',
                  border: '1px solid #ddd',
                  borderRadius: '4px'
                }}
              />
            </div>
            
            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px' }}>
              <button
                onClick={handleCancelEdit}
                style={{
                  padding: '8px 16px',
                  backgroundColor: '#ccc',
                  color: 'white',
                  border: 'none',
                  borderRadius: '4px',
                  cursor: 'pointer'
                }}
              >
                取消
              </button>
              <button
                onClick={handleSaveEdit}
                style={{
                  padding: '8px 16px',
                  backgroundColor: '#ff69b4',
                  color: 'white',
                  border: 'none',
                  borderRadius: '4px',
                  cursor: 'pointer'
                }}
              >
                保存
              </button>
            </div>
          </div>
        </div>
      )}

      {/* 新增数据模态框 */}
      {showAddModal && (
        <div style={{
          position: 'fixed',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundColor: 'rgba(0, 0, 0, 0.5)',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          zIndex: 1000
        }}>
          <div style={{
            backgroundColor: 'white',
            borderRadius: '8px',
            padding: '20px',
            width: '400px',
            maxWidth: '90%'
          }}>
            <h3 style={{ marginBottom: '20px', color: '#333333' }}>新增数据</h3>
            
            <div style={{ marginBottom: '15px' }}>
              <label style={{ display: 'block', marginBottom: '5px', color: '#333333' }}>名称</label>
              <input
                type="text"
                value={newData.name}
                onChange={(e) => setNewData({ ...newData, name: e.target.value })}
                style={{
                  width: '100%',
                  padding: '8px',
                  border: '1px solid #ddd',
                  borderRadius: '4px'
                }}
                placeholder="请输入名称"
              />
            </div>
            <div style={{ marginBottom: '15px' }}>
              <label style={{ display: 'block', marginBottom: '5px', color: '#333333' }}>平台</label>
              <select
                value={newData.platform}
                onChange={(e) => setNewData({ ...newData, platform: e.target.value })}
                style={{
                  width: '100%',
                  padding: '8px',
                  border: '1px solid #ddd',
                  borderRadius: '4px'
                }}
              >
                <option value="douyin">抖音</option>
                <option value="kuaishou">快手</option>
                <option value="xiaohongshu">小红书</option>
                <option value="wechat">微信</option>
              </select>
            </div>
            
            <div style={{ marginBottom: '15px' }}>
              <label style={{ display: 'block', marginBottom: '5px', color: '#333333' }}>点赞量</label>
              <input
                type="number"
                value={newData.likes}
                onChange={(e) => setNewData({ ...newData, likes: Number(e.target.value) })}
                style={{
                  width: '100%',
                  padding: '8px',
                  border: '1px solid #ddd',
                  borderRadius: '4px'
                }}
                min="0"
              />
            </div>
            
            <div style={{ marginBottom: '15px' }}>
              <label style={{ display: 'block', marginBottom: '5px', color: '#333333' }}>转发量</label>
              <input
                type="number"
                value={newData.forwards}
                onChange={(e) => setNewData({ ...newData, forwards: Number(e.target.value) })}
                style={{
                  width: '100%',
                  padding: '8px',
                  border: '1px solid #ddd',
                  borderRadius: '4px'
                }}
                min="0"
              />
            </div>
            
            <div style={{ marginBottom: '15px' }}>
              <label style={{ display: 'block', marginBottom: '5px', color: '#333333' }}>播放量</label>
              <input
                type="number"
                value={newData.plays}
                onChange={(e) => setNewData({ ...newData, plays: Number(e.target.value) })}
                style={{
                  width: '100%',
                  padding: '8px',
                  border: '1px solid #ddd',
                  borderRadius: '4px'
                }}
                min="0"
              />
            </div>
            
            <div style={{ marginBottom: '20px' }}>
              <label style={{ display: 'block', marginBottom: '5px', color: '#333333' }}>抓取时间</label>
              <input
                type="date"
                value={newData.crawlTime}
                onChange={(e) => setNewData({ ...newData, crawlTime: e.target.value })}
                style={{
                  width: '100%',
                  padding: '8px',
                  border: '1px solid #ddd',
                  borderRadius: '4px'
                }}
              />
            </div>
            
            <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '10px' }}>
              <button
                onClick={() => {
                  setShowAddModal(false);
                  // 重置表单
                  setNewData({
                    name: '',
                    likes: 0,
                    forwards: 0,
                    plays: 0,
                    crawlTime: '',
                    platform: 'douyin'
                  });
                }}
                style={{
                  padding: '8px 16px',
                  backgroundColor: '#ccc',
                  color: 'white',
                  border: 'none',
                  borderRadius: '4px',
                  cursor: 'pointer'
                }}
              >
                取消
              </button>
              <button
                onClick={handleAddData}
                style={{
                  padding: '8px 16px',
                  backgroundColor: '#ff69b4',
                  color: 'white',
                  border: 'none',
                  borderRadius: '4px',
                  cursor: 'pointer'
                }}
              >
                确定
              </button>
            </div>
          </div>
        </div>
      )}

      {/* 图表区域 - 现在在下方 */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gap: '20px',
        marginBottom: '30px'
      }}>
        <div style={{
          background: 'rgba(255, 255, 255, 0.9)',
          borderRadius: '12px',
          padding: '20px',
          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
        }}>
          <h2 style={{
            color: '#333333',
            marginBottom: '20px',
            textAlign: 'center'
          }}>
            用户数据趋势图
          </h2>
          <div style={{ height: '400px' }}>
            <EChart option={lineChartOption} />
          </div>
        </div>

        <div style={{
          background: 'rgba(255, 255, 255, 0.9)',
          borderRadius: '12px',
          padding: '20px',
          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)'
        }}>
          <h2 style={{
            color: '#333333',
            marginBottom: '20px',
            textAlign: 'center'
          }}>
            数据分布统计
          </h2>
          <div style={{ height: '400px' }}>
            <EChart option={pieChartOption} />
          </div>
        </div>
      </div>
    </div>
  );
};

export default AlarmPage;